<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="/web/static/user/css/mui.css" rel="stylesheet"/>
    <link href="/web/layui/css/layui.css" rel="stylesheet"/>
</head>
<style>
    #title_bar {
        background: #fff;
        box-shadow: none;
        border-bottom: 1px solid #d9d9d9;
    }

    .content-line {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        padding-left: 10px;
    }
</style>
<body>
<header class="mui-bar mui-bar-nav" id="title_bar">
    <h1 class="mui-title">商品详情</h1>
</header>
<div class="layui-carousel" id="carousel">
    <div carousel-item="">
        {if $data.image1}
        <a>
            <div><img style="width: 100%" src="{$data.image1}"></div>
        </a>
        {/if}
        {if $data.image2}
        <a>
            <div><img style="width: 100%" src="{$data.image2}"></div>
        </a>
        {/if}
        {if $data.image3}
        <a>
            <div><img style="width: 100%" src="{$data.image3}"></div>
        </a>
        {/if}
        {if $data.image4}
        <a>
            <div><img style="width: 100%" src="{$data.image4}"></div>
        </a>
        {/if}
    </div>
</div>
<div class="content-line">商品详情</div>
<div style="background: #ffffff;font-size: 15px;padding: 5px;padding-left: 10px;">
    <div style="line-height: 26px">{$data.title}</div>
    <div style="line-height: 26px;color: red">￥{$data.price}</div>
</div>
<div style="height: 10px"></div>
<div style="background: #ffffff;font-size: 15px;padding: 5px;padding-left: 10px;">
    <div style="height: 26px">数量</div>
    <div class="mui-btn" id="minus"
         onclick="number.innerHTML = number.innerHTML-1;if(number.innerHTML==0)minus.style.display='none';sum()"
         style="background: orange;border-color:orange;padding:0 5px;color: #ffffff">-
    </div>
    <span style="min-width: 30px;" id="number">1</span>
    <div class="mui-btn" id="plus"
         onclick="number.innerHTML = parseInt(number.innerHTML)+1;if(number.innerHTML==0){minus.style.display='none';}else{minus.style.display='';}sum()"
         style="background: orange;border-color:orange;padding:0 5px;color: #ffffff">+
    </div>
</div>
<div class="content-line">图文详情</div>
<div style="width: 100%">{$data.content}</div>
<nav class="mui-bar mui-bar-tab" style="box-shadow: none">
    <div class="nav-left" style="background: #ffffff;line-height: 50px;color: red;width: 80%;float: left">&nbsp;&nbsp;&nbsp;￥<span
            id="price_total">{$data.price}</span></div>
    <div class="nav-right" onclick="down()"
         style="background: orange;border-color: orange;text-align: center;line-height: 50px;float:right;width: 20%;color: #ffffff">
        下单
    </div>
</nav>
<script src="/web/layui/layui.all.js"></script>
<script src="/web/static/user/js/jquery.js"></script>
<script>
    var price = '{$data.price}';
    var gid = '{$gid}';
    $(document).ready(function () {
        layui.carousel.render({
            elem: '#carousel',
            width: '100%',
            height: '250px',
            interval: 2000
        });
    })
    function sum() {
        var number = $("#number").html();
        $("#price_total").html(number * price);
    }
    function down() {
        //下载app
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
            //跳转安卓下载
            var hasApp = true, t = 1000;
            setTimeout(function () {  //没有安装APP则跳转至应用宝下载，延时时间设置为2秒
                if (!hasApp) window.location.href = '#'//android download;
            }, 2000);
            var t1 = Date.now();
            window.location.href = "jiujiashuma://host";
            setTimeout(function () {    //t的时间就是出发APP启动的时间，若APP启动了，再次返回页面时t2这行代码执行，hasApp即为true。反之若APP没有启动即为false
                var t2 = Date.now();
                hasApp = !(!t1 || t2 - t1 < t + 150);
            }, t);

        } else if (isiOS) {
            //跳转苹果下载
            location.href = '#'//ios download;
        }
    }
</script>
</body>
</html>